<!--
 * @Author: fengxx
 * @Date: 2025-09-05 09:19:27
 * @LastEditors: fengxx
 * @LastEditTime: 2025-09-30 10:35:05
-->
<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import { computed, inject, provide, reactive, ref, watch } from 'vue'

const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
const rr = ref('pppp')
// const href = ref('http://www.baidu.com')
// const a = ref(1)
// const div = ref(`<div></div>`)
const students = reactive([
  {
    id: 1,
    name: '张三',
    age: 18,
    hight: 183,
    weight: 86,
  },
  {
    id: 1,
    name: '李四',
    age: 18,
    hight: 183,
    weight: 86,
  },
])

const fun = () => {
  // console.log('fun')
}
// 暴露自身属性的方法
defineExpose({
  rr,
  fun,
})

// const b = computed(() => {
//   return a.value >= 10 ? a : `0${a.value}`
// })
const slotName = ref('bb')
const nums = ref([1, 2, 3])

const obj = reactive({
  foo: 'welcome',
  hh: 1,
  isTrue: false,
  nums: [1, 2, 3],
  obj: {
    a: '',
  },
})

const welcome = ref('aa')
const changeTxt = () => {
  obj.foo = 'kk'
  obj.nums.push(5)
  welcome.value = 'uu'
}

const callback = (a: number, b: string) => {
  console.log(a, b)
  obj.foo = 'kk'
}

// provide('rootMsg', {
//   count11: 1,
// })

// const submit = (obj) => {
//   console.log(obj.a, obj.b)
// }

// const rootMsg = inject('rootMsg')

const msg = ref('Hello World')
</script>

<template>
  <!-- <div>{{ rootMsg?.count11 }}</div> -->
  <!-- <div v-for="value in students" :key="value.id" @click="changeTxt">
    <span>姓名：{{ value.name }}</span
    ><span>年龄{{ value.age }}</span
    ><span>体重：{{ value.weight }}</span
    ><span>身高{{ value.hight }}</span>
    {{ obj.nums }}
  </div>
  <h1>{{ msg }}</h1> -->
  <WelcomeItem
    v-model:msg="msg"
    :foo="welcome"
    :hh="1"
    :isTrue="true"
    :nums
    :obj="{ a: '' }"
    @change-parent="callback"
    v-model:title.capitalize="welcome"
    class="aa"
    style="border: 1px solid red"
    @click="
      () => {
        console.log('llll')
      }
    "
  >
    <template v-slot:[slotName]="slotProps">
      <span>1123324</span>
      <button>{{ `${welcome}welcome${slotProps.my}` }}</button>
    </template>
    <!-- <template #[slotName]>
      <button>插入bb位置的元素</button>
    </template> -->
    <template v-slot:default="{ myText }">
      <button>插入默认t位置的元素{{ myText }}</button>
      <span>dgdfhf</span>
    </template>

    <!-- <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template> -->
  </WelcomeItem>
  <!-- <WelcomeItem v-bind="obj">
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>
  </WelcomeItem> -->

  <!-- <WelcomeItem :class="$attrs.class">
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>
    This project is served and bundled with
    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
    recommended IDE setup is
    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
    +
    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
      >Vue - Official</a
    >. If you need to test your components and web pages, check out
    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
    and
    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
    /
    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.

    <br />

    More instructions are available in
    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
    >.
  </WelcomeItem> -->
  <!-- <input type="text" v-model="a" />
  <a href="" v-html="div"></a>
  <a :href>{{ a >= 10 ? a : `0${a}` }}</a>
  <a :href v-if="a > 10">{{ a }}</a>
  <a :href v-else>{{ `0${a}` }}</a> -->
</template>
<style scoped>
.aa {
  color: red;
}
</style>
